/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable jsx-a11y/alt-text */
import React, { useEffect, useState } from 'react';
import {
  Breadcrumb,
  Button,
  Card,
  Form,
  Input,
  message,
  Modal,
  Radio,
  Space,
  Upload,
} from 'antd';
import { Link } from 'react-router-dom';
import Channel from 'components/Channel';

import ReactQuill from 'react-quill';
import styles from './index.module.scss';

import { baseURL } from 'utils/request';
import { getToken } from 'utils/storage';
import { UploadOutlined } from '@ant-design/icons';
import {
  addArticleApi,
  editArticleApi,
  getArticleDetailsApi,
} from 'api/article';
import { useRef } from 'react/cjs/react.development';

export default function ArticlePublish(_props) {
  // 创建一个fromRef用来回显表单数据
  const fromRef = useRef();
  const articleId = _props.match.params.id;
  // 获取文章详情
  const getArticleDetails = async (id) => {
    let res = await getArticleDetailsApi(id);
    console.log(res);

    // res.type = res.cover.type;
    setType(res.cover.type);
    // 回显表单数据
    fromRef.current.setFieldsValue({ ...res, type: res.cover.type });

    // 回显图片
    setFileList(
      res.cover.images.map((item) => ({
        url: item,
        // 解决编辑时,添加后台所需要的数据
        // 第一种方法,直接在回显数据是,添加
        response: { data: { url: item } },
      }))
    );
  };
  useEffect(() => {
    // console.log(_props.match.params.id);
    if (articleId) {
      getArticleDetails(articleId);
    }
  }, []);

  // 保存图片上传张数type
  const [type, setType] = useState(1);
  // 声明一个fileList
  const [fileList, setFileList] = useState([]);

  const [imgSrc, setImgSrc] = useState('');

  // 定义一个存为草稿的ref
  const draftRef = useRef(false);

  const onFinish = async (values) => {
    // console.log(values);
    if (showFileList.length !== type) {
      message.warning('图片数量不对');
      return;
    }

    let fromData = { ...values };

    fromData.cover = {
      type,
      images: showFileList.map((item) => item.response.data.url),

      // 第二种方法,在点击编辑时,改变取值方向
      // images: showFileList.map((item) =>
      //   item.response ? item.response.data.url : item.url
      // ),
    };

    delete fromData.type;
    console.log(fromData);

    // 存为草稿
    // console.log(draftRef);

    // 发送请求编辑文章
    if (articleId) {
      await editArticleApi(fromData, articleId, draftRef.current);
      message.success('编辑成功', 2);
      // 跳转页面
      _props.history.push('/list');
      return;
    }

    // 发送请求发布文章
    await addArticleApi(fromData, draftRef.current);
    message.success('发布成功', 2);
    // 跳转页面
    _props.history.push('/list');
  };

  const props = {
    // accept,点击上传时,默认显示要上传图片的类型
    accept: '.png,.jpg,.jpeg,.gif',
    // name是要上传的图片类型,一般有后台规定
    name: 'image',
    action: `${baseURL}/v1_0/upload`,
    headers: {
      authorization: `Bearer ${getToken()}`,
    },
    onChange(info) {
      // 保存上传图片的信息
      setFileList(
        info.fileList.map((item) => ({
          ...item,
          // 改造一下数据,解决上传GIF图片时,不会动的问题
          thumbUrl: item.response ? item.response.data.url : item.url,
        }))
      );
      // console.log(info.fileList);

      if (info.file.status === 'done') {
        message.success(`${info.file.name} 图片上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 图片上传失败`);
      }
    },
    // 图片预览
    onPreview(file) {
      // console.log(file);
      // 解决回显图片后, 图片预览功能失效的问题;file.url
      setImgSrc(file.thumbUrl || file.url);
    },
    // 图片上传前的回调
    beforeUpload(file, fileList) {
      // console.log(file);
      // 白名单
      const whiteList = ['image/png', 'image/jpg', 'image/gif', 'image/jpeg'];
      if (!whiteList.includes(file.type)) {
        message.warning('不支持上传图片类型', 2);
        return Upload.LIST_IGNORE;
      }
      if (file.size >= 1024 * 1024) {
        message.warning('上传的图片大小不能超过1MB', 2);
        // 返回false 则停止上传,图片还是会显示在前端页面
        // 返回 Upload.LIST_IGNORE 停止上传,并且不会显示在前端页面
        return Upload.LIST_IGNORE;
      }
    },
  };

  // From表单字段发生改变是触发;
  const handleValuesChange = (changedValues, allValues) => {
    // console.log(changedValues, allValues);
    if (changedValues.type !== undefined) {
      setType(changedValues.type);
    }
  };
  // 定义一个图片显示的计算属性
  const showFileList = fileList.filter((item, index) => {
    // type = 0,代表无图
    if (type === 0) return false;
    // type = 1,代表只有一张图
    if (type === 1) return index === 0;
    // type = 3,代表三张图
    return true;
  });

  return (
    <div className={styles.ArticlePublish}>
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to={'/home'}>首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              {articleId ? '编辑文章' : '发布文章'}
            </Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        <Form
          name="basic"
          size="large"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          initialValues={{ content: '', type }}
          onFinish={onFinish}
          autoComplete="off"
          onValuesChange={handleValuesChange}
          ref={fromRef}
        >
          <Form.Item
            label="标题:"
            name="title"
            rules={[{ required: true, message: '请输入文章标题!' }]}
          >
            <Input placeholder="请输入文章标题" />
          </Form.Item>

          <Form.Item
            label="频道:"
            name="channel_id"
            rules={[{ required: true, message: '频道不能为空!' }]}
          >
            <Channel></Channel>
          </Form.Item>
          <Form.Item
            label="内容:"
            name="content"
            rules={[
              {
                required: true,
                message: '文章内容不能为空!',
                // validator自定义校验
                validator: (_, value) => {
                  // console.log(value);
                  if (!value || value === '<p><br></p>') {
                    // 返回错误对象
                    return Promise.reject(new Error());
                  }
                  return Promise.resolve();
                },
              },
            ]}
          >
            <ReactQuill placeholder="请输入内容......"></ReactQuill>
          </Form.Item>
          <Form.Item label="封面:" name="type">
            <Radio.Group>
              <Radio value={1}>单图</Radio>
              <Radio value={3}>三图</Radio>
              <Radio value={0}>无图</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4 }}>
            <Upload {...props} listType="picture-card" fileList={showFileList}>
              {fileList.length >= type ? null : (
                <Button icon={<UploadOutlined />}></Button>
              )}
            </Upload>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                {articleId ? '编辑文章' : '发布文章'}
              </Button>
              {/* 点击存草稿修改draftRef.current 的值,然后通过htmlType="submit"冒泡到提交函数 */}
              <Button
                htmlType="submit"
                onClick={() => (draftRef.current = true)}
              >
                存草稿
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
      <Modal
        maskClosable={false}
        title="图片预览"
        visible={!!imgSrc}
        footer={null}
        onCancel={() => setImgSrc('')}
      >
        <div style={{ textAlign: 'center' }}>
          <img
            style={{ width: '480px', objectFit: 'cover' }}
            src={imgSrc}
          ></img>
        </div>
      </Modal>
    </div>
  );
}
